<template>
  <div class="d-flex flex-column flex-shrink-0 p-0 bg-light"
    style=" width: 15vb; height: 90vh; background-color: black; font-size: large; ">
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="/basicConsole" class="nav-link link-dark">
          基本设置
        </a>
      </li>
      <li>
        <a href="/screenConsole" class="nav-link link-dark">
          界面设置
        </a>
      </li>
      <li>
        <a href="/optfastConsole" class="nav-link link-dark">
          优化加速
        </a>
      </li>
      <li>
        <a href="/labConsole" class="nav-link link-dark">
          实验室
        </a>
      </li>
      <li>
      </li>
    </ul>
    <hr>
  </div>
</template>

<style scoped>
/* 自定义悬停样式 */
.nav-link:hover {
  background-color: #0056b3;
  /* 悬停时的背景颜色 */
  color: black;
  /* 悬停时的文字颜色 */
}
</style>

<script lang="ts">

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'OffCanvas',

});


</script>